<template>
  <div id="emailVal">
        <section class="order-main-header">
            <mt-header title="邮箱修改">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
    <div class='val-input'  v-if="formData.oldEmail">
        <span class="val-t">旧邮箱</span>
        <input type="text" v-model="formData.oldEmail" :disabled='oldEmailDisabled'>
    </div>
     <div class='val-input'>
        <span class="val-t">新邮箱</span>
        <input type="text" v-model="formData.email" placeholder="请输入新的邮箱">
    </div>
    <div class='val-input'>
        <span class="val-t">邮箱验证码</span>
        <input type="text" class="code-input" v-model="formData.code">
        <span class="codeBtn" @click="getCode()">{{sendCode}}</span>
    </div>
     <button class='addBtn'  @click="addBtn()">确定修改</button>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';//导入toast组件
export default {
    data() {
        return {
            sendCode:'发送',
            valSwitchTip:'开启邮箱验证',
            formData:{
                email:null,
                oldEmail:'',
                code:'',
                oldEmailDisabled:false
            }
        }
    },
    mounted() {
          this.$http.post('/v1/session?'+ new Date().getTime(),{}).then(res=>{
            res = res.data
            if(res.code == 200){
                this.formData.oldEmail=res.data.email_num;
                console.log(this.formData.oldEmail)
                if(this.formData.oldEmail){
                    this.oldEmailDisabled=true;
                }
            }
            })
    },
    methods:{
            getCode() {
                if(!isNaN(this.sendCode)){
                    return ;
                }
                if(this.formData.email==null){
                    Toast("邮箱号不能为空");
                    return;
                }
                var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if(!reg.test(this.formData.email)){
                   Toast("邮箱格式不正确");
                }
               this.$http.post('/v1/account/sendBindCode', { check: 1, name:  this.formData.email },).then(res=>{
                    res = res.data
                if(res.code == 200){
                this.sendCode = 60
                this.btnColor = 'color:#ddd'
                var timeId = setInterval(function(){
                  this.sendCode--
                  if(this.sendCode == 0){
                    clearInterval(timeId)
                    this.btnColor = 'color:#3381ff'
                    this.sendCode = '发送'
                  }
                }.bind(this),1000)
                }else if(res.code==4){
                    Toast("账号已被注册或绑定");
                }
               });
        },
        addBtn(){
            let param = {
                account: this.formData.email,
                code: this.formData.code
            };
            if(this.formData.code.trim()==null){
                   Toast("验证码不能为空");
                   return;
            }
             this.$http.post( '/v1/account/modEmailAndPhone',param,).then(res=>{
                let data=res.data;
                if (data.code == 4) {
                Toast("邮箱已被注册或绑定");
            } else if (data.code == 200) {
                Toast("邮箱认证成功");
                 this.$router.go(-1);
            } else if (data.code == 100) {
                Toast("请先发送验证码");
            } else if (data.code == 101) {
                Toast("操作频繁，请2小时后再试");
            } else if (data.code == 102) {
                Toast("验证码错误，剩余验证次数：" + data.data);
            } else {
                Toast("网络错误");
             }
            })
        },
         handleClose(){
                this.$router.go(-1);
            },
    }
}
</script>

<style lang="less" scoped>
::-webkit-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-moz-placeholder,::-moz-placeholder {
    color: #E0E0F9;
    font-size: 28px
}

:-ms-input-placeholder {
    color: #E0E0F9;
    font-size: 28px
}
 .addBtn{
            display: block;
            width: 426px;
            height: 58px;
            line-height: 58px;
            font-size: 30px;
            color: #ffffff;
            text-align: center;
            margin:143px auto;
            margin-bottom: 0;
            height:86px;
            background:rgba(51,129,255,1);
            border-radius:10px;
        }
    #emailVal{
        padding:0 30px;
        color: #8686C0;
    }
    .user-top {
        height: 110px;
        line-height: 110px;
        padding: 0 60px;
    }
    .val-input{
        height: 93px;
        line-height: 93px;
        border-bottom: 1px solid #222240;
        display: flex;
        .val-t{
            width: 150px;
        }
        input{
            line-height: 93px;
            border:none;
            background:none;  
            outline:none;  
            font-size: 30px;
            color: #E0E0F9;
        }
        input:focus{   
            border:none;
        }
        .code-input{
            flex: 1;
        }
        .codeBtn{
            width: 58px;
            color: #5298F1;
        }
    }
    .val-tip{
        margin-top: 19px;
        font-size: 22px;
    }
    .val-swtich{
        margin-top: 42px;
        display: flex;
        justify-content: space-between;
        line-height: 70px;
        img{
            width: 80px;
            height: 70px;
        }
    }
    .mint-header {
    height: 100px;
    font-size: 32px;
    background: #161736;
    color: #E0E0F9;
}
</style>